
$(document).ready(function () {
    // 初始化展示4宫格
    //弹窗
    $('.center_btn2').on('click', function () {
        $('.filterbg').show();
        $('.popup').show();
        $('.popup').width('3px');
        $('.popup').animate({ height: '76%' }, 400, function () {
            $('.popup').animate({ width: '82%' }, 400);
        });
        setTimeout(summaryShow, 800);
    });
    $('.popupClose').on('click', function () {
        $('.popupClose').css('display', 'none');
        // $('.summary').hide();

        $('.popup').animate({ width: '3px' }, 400, function () {
            $('.popup').animate({ height: 0 }, 400);
        });
        setTimeout(summaryHide, 800);
    });
    function summaryShow() {
        $('.popupClose').css('display', 'block');
        // selDeviceData();
        createGridLayout(toggle4);
        formatVideolist()

    };
    function summaryHide() {
        $('.filterbg').hide();
        $('.popup').hide();
        $('.popup').width(0);
    };
})
var count = 0
// 定义不同的布局数组
var toggle1 = [1]; //单屏
var toggle4 = [1, 2, 3, 4]; //4分屏
var toggle6 = [1, 2, 3, 4, 5, 6]; //6分屏
var toggle9 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //9分屏
// 根据不同的按钮点击事件，应用不同的布局
document.getElementById("toggle1").addEventListener("click", function () {
    createGridLayout(toggle1);
    formatVideolist()
});
document.getElementById("toggle4").addEventListener("click", function () {
    createGridLayout(toggle4);
    formatVideolist()
});
document.getElementById("toggle6").addEventListener("click", function () {
    createGridLayout(toggle6);
    formatVideolist()
});
document.getElementById("toggle9").addEventListener("click", function () {
    createGridLayout(toggle9);
    formatVideolist()
});
// 动态创建视频容器
function createGridLayout(layout) {
    var container = document.getElementById("container");
    // 清空容器
    container.innerHTML = "";
    // 动态创建class
    container.className = "play" + layout.length;
    // 根据布局创建视频元素并添加到容器中
    for (var i = 0; i < layout.length; i++) {
        var video = createVideoElement(i);
        var number = layout.length;
        count = number
        switch (number) {
            case 1:
                video.className = "grid-item1";
                break;
            case 4:
                video.className = "grid-item4";
                break;
            case 6:
                video.className = "grid-item6";
                break;
            case 9:
                video.className = "grid-item9";
                break;
            default:
                video.className = "grid-item4";
                break;
        }
        container.appendChild(video);
    }
}
// 动态创建video标签
function createVideoElement(id) {
    var video = document.createElement("live-player");
    video.id = "video" + id;
    video.videoUrl = ""
    video.loop = true
    return video;
}

function formatVideolist() {
    a = 0
    for (let i = 0; i < indexArray.length; i++) {
        document.getElementById("liId" + indexArray[i]).src = "./camera.png"
    }
    indexArray = []
}